<template>
	<view>
		<back title="订单详情"></back>
		<view class="order_info_box" :style="background">
			<view class="order_inof_other">
				<view class="order_inof_other_top">
					<view class="other_top_left">
						<span v-if="order_info.status==0">待付款</span>
						<span v-if="order_info.status==0" class="left_time">
							支付剩余时间 
							<u-count-down style="margin-left: 10rpx;" color="#000" font-size="20rpx" bg-color="rgba(0,0,0,0)" :timestamp="order_info.surplus_time"></u-count-down>
						</span>
						<span v-if="order_info.status==1">待发货</span>
						<span v-if="order_info.status==1" class="left_time">商品正在打包</span>
						<span v-if="order_info.status==2">退款中</span>
						<span v-if="order_info.status==2" class="left_time">请耐心等待</span>
						<span v-if="order_info.status==3">已退款</span>
						<span v-if="order_info.status==3" class="left_time">订单已退款</span>
						<span v-if="order_info.status==4">已发货</span>
						<span v-if="order_info.status==4" class="left_time">订单已发货</span>
						<span v-if="order_info.status==5">已收货</span>
						<span v-if="order_info.status==5" class="left_time">订单已收货</span>
						<span v-if="order_info.status==6">已完成</span>
						<span v-if="order_info.status==6" class="left_time">订单已完成</span>
						<span v-if="order_info.status==7">已关闭</span>
						<span v-if="order_info.status==7" class="left_time">订单已关闭</span>
						
					</view>
					<image style="width: 80rpx;" src="../../static/vip/icon_6.png" mode="widthFix"></image>
				</view>
			</view>
			<!-- 地址信息 -->
			<view class="address_info"  @click="chooseAddressList">
				<view>
					<view class="address_info_1">
						{{order_info.name}}&nbsp;{{order_info.phone}}
					</view>
					<view class="">
						{{order_info.province_str}} {{order_info.city_str}} {{order_info.area_str}}
					</view>
					<view class="">
						{{order_info.address}}
					</view>
				</view>
				<u-icon name="arrow-right" color="#000000" size="28"></u-icon>
			</view>
			<!-- 商品信息 -->
			<view class="">
				<view class="shop_info" v-for="(item,index) in order_info.order_spec"  style="color: #fff;">
					
					<view  class="shop_info2">
						<u-image :src="item.goods_data.pic" @click="navTo(`/pages/shop_info/shop_info?id=${item.goods_data.id}`)" width="150rpx" height="150rpx" mode="aspectFit"></u-image>
						<view @click="navTo(`/pages/shop_info/shop_info?id=${item.goods_data.id}`)" class="shop_info_right">
							<view style="color:#333;" class="shop_info_title uni-ellipsis">
								{{item.goods_data.name}}{{item.goods_data.name}}
							</view>
							<view class="shop_info_pic">
								<view class="shop_info_right_price">
									<span class="price_left">价格：</span>
									<span class="price_left" style="font-size: 28rpx; margin-right: 5rpx;font-weight: 700 ;">{{item.price}}</span>
									<span class="shop_info3" style="font-weight: 500 ; color: #000;">RMB</span>
								</view>
								<view class="shop_info_right_price">
									<span style="color:#ccc;">x{{item.num-item.refund_num}}</span>
									
								</view>
							</view>
						</view>
					</view>
					<view class="bao_num" style="" >
						<span>{{item.express_code?` 单号:${item.express_code}`:"暂无运单号"}}</span>
						<span class="price_left" @click="see_info(item)">查看物流</span>
					</view>
				</view>
			</view>
			<view class="shop_info_4">
				<view class="inof_4_item">
					<span>订单运费</span>
					<span>{{order_info.postage_price>0?order_info.postage_price:'免邮'}}</span>
				</view>
				<view class="inof_4_item">
					<span>优惠劵</span>
					<span>{{order_info.coupon_obj?`${order_info.coupon_obj.coupon_money}RMB`:'未使用优惠劵'}}</span>
				</view>
				<view class="inof_4_item">
					<span>实付款</span>
					<span>{{order_info.price}}RMB</span>
				</view>
				<view class="inof_4_item">
					<span>备注</span>
					<span>{{order_info.remark?order_info.remark:'-'}}</span>
				</view>
			</view>
			<view class="shop_info_4">
				<view class="inof_4_item">
					<span>订单编号</span>
					<span>{{order_info.code}}</span>
				</view>
				<view class="inof_4_item">
					<span>下单时间</span>
					<span>{{order_info.add_time}}</span>
				</view>
				<view v-if="order_info.pay_time" class="inof_4_item">
					<span>付款时间</span>
					<span>{{order_info.pay_time?order_info.pay_time:'-'}}</span>
				</view>
				<view v-if="order_info.pulling_time" class="inof_4_item">
					<span>发货时间</span>
					<span>{{order_info.pulling_time?order_info.pulling_time:'-'}}</span>
				</view>
				<view v-if="order_info.delivery_time" class="inof_4_item">
					<span>收货时间</span>
					<span>{{order_info.delivery_time?order_info.delivery_time:'-'}}</span>
				</view>
				<view v-if="order_info.refund_time" class="inof_4_item">
					<span>退款时间</span>
					<span>{{order_info.refund_time?order_info.refund_time:'-'}}</span>
				</view>
				
			</view>
			<view class="liu_list_old" style="margin-top: 24rpx;">
				<!-- 留言板额 -->
				<view class="liu_list_title">留言内容</view>
				<scroll-view v-if="liu_list.length>0" scroll-y="true" class="liu_list"  scroll-top="20000">
					<view v-for="(item , index) in liu_list" :key="index" class="liu_connect_box">
						<span class="connect_time"> {{item.add_time}}</span>
						<view class="liu_connect">
							<view class="liu_connect_left">
								{{item.type==0?'卖家':'我的'}}：
							</view>
							<view class="liu_connect_right">
								{{item.content}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="liu_list_old2" style="margin-top: 24rpx;">
				<!-- 留言内容 -->
				<view class="liu_list_title">留言板</view>
				<textarea class="testarea" v-model="liu_text"  style="padding: 0 24rpx;" placeholder-class="plac" placeholder="请输入留言"></textarea>
				<view class="" style="display: flex;justify-content: flex-end;"> 
					<view @click="liuYan" class="orderinof_btn2" style=" margin-right: 24rpx ; margin-bottom: 24rpx;">
						留言
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100%; height: 120rpx;" class="">
			
		</view>
		<view class="bottm_btn_box">
			<view @click="Order_cancel(order_info)" v-if='order_info.status==0' class="orderinof_btn2">
				取消订单
			</view>
			<view @click="order_pay(order_info)" v-if='order_info.status==0' class="orderinof_btn1">
				立即付款
			</view>
			<view @click="shouHou" v-if='order_info.status==1'class="orderinof_btn2">
				申请售后
			</view>
			<view @click="cuiFa" v-if="order_info.status==1" class="orderinof_btn1">
				催促发货
			</view>
			<!-- <view v-if="order_info.status==4" class="orderinof_btn2">
				查看物流
			</view> -->
			<view @click="shouhuo(order_info)" v-if="order_info.status==4" class="orderinof_btn1">
				确认收货
			</view>
			<view @click="order_del(order_info)" v-if="order_info.status==7" class="orderinof_btn1">
				删除订单
			</view>
			<!-- <view v-if="order_info.status==2" class="orderinof_btn1">
				取消退款
			</view> -->
		</view>
		
		<!-- 修改地址 -->
		<u-popup v-model="address_pop_show" mode="bottom" border-radius="14">
			<view class="address_pop_box">
				<view class="address_pop_top">
					<view class="fahup_pop_box_title">
						选择邮寄地址
						<view class="search_box">
							<input @confirm="getAddress" placeholder="请输入收货人姓名" type="text" v-model="address_text"  />
							<u-icon @click="getAddress" name="search" color="#666" size="28"></u-icon>
						</view>
					</view>
					<view @click="navTo('/pages/addAddresss/addAddresss')" class="addAddress">
						<image style="width: 24rpx; height: 24rpx;margin-right: 8rpx;"
							src="https://www.mengkahuyu.com/index_png/add_icon.png" mode=""></image>
						<span>添加收件人</span>
					</view>
				</view>
				<scroll-view class="scroll_y_address" scroll-y="true">
					<view class="scroll_padding">
						<view v-for="(ite,ind) in addressList" :key="ind"
							class="address_item">
							<view  @click="chooseAddress(ite ,ind)" class="address_left">
		
								<image v-if="ite.isChoose" style="width: 24rpx; height: 24rpx;"
									src="https://www.mengkahuyu.com/index_png/radio_choose.png" mode=""></image>
								<image v-else style="width: 24rpx; height: 24rpx;"
									src="https://www.mengkahuyu.com/index_png/radio.png" mode=""></image>
							</view>
							<view  @click="chooseAddress(ite ,ind)" class="address_center">
								<view class="centern_top">
									<span class="user_name">
										{{ite.name}}
									</span>
									<span class="user_phone">
										{{ite.phone}}
									</span>
								</view>
								<view class=" centern_top centern_center">
									{{ite.province}}
									{{ite.city}}
									{{ite.area}}
								</view>
								<view class="centern_center centern_top">
									{{ite.address}}
								</view>
							</view>
							<view @click="navTo('/pages/addAddresss/addAddresss?id='+ite.id)" class="address_left">
								<image  style="width: 24rpx; height: 24rpx;"
									src="https://www.mengkahuyu.com/index_png/edit.png" mode=""></image>
							</view>
		
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import kefu from '@/componts/kefu/kefu.vue';
	import back from '@/componts/back.vue';
	export default {
		components:{
			kefu,
			back
		},
		data() {
			return {
				style:{},
				order_id:null,
				order_info:{},
				coupon_info:null,
				address_pop_show:false,
				addressList:[],
				address_text:'',
				liu_list:[],
				liu_text:''
			}
		},
		onLoad(e) {
			// console.log(e)
			this.order_id = e.order_id
			this.getDetail(e.order_id)
			
		},
		onShow() {
			var style =  uni.getStorageSync('style')
			style = JSON.parse(style)
			this.style = style
			this.background = {
				 'background':`
				 radial-gradient(circle at top left, ${this.style.color8} 0%, transparent 60%), 
				 radial-gradient(circle at top right, ${this.style.color9} 0%, transparent 40%),
				 radial-gradient(circle at bottom left, #f6f6f6 0%, transparent 40%),
				 radial-gradient(circle at bottom right, #f6f6f6 0%, transparent 40%)`,
				'backgroundBlendMode': 'screen', /* 混合模式优化颜色过渡 */
			}
			this.style = style
		},
		methods: {
			messageUpdate(id){
				this.$wqzApi.message_update({order_id:id}).then(res=>{
					
				})
			},
			liuYan(){
				if(this.liu_text){
					var data = {
						"order_id": this.order_id, //订单id
						"content": this.liu_text, //内容
						"type": 1 //0后台 1用户
					}
					this.$wqzApi.message_add(data).then(res=>{
						this.$wqzApi.message_list({
							"order_id": this.order_id, //订单id
							"order_desc": 1 //1正序 2倒序
						}).then(res=>{
							this.liu_list = res.data.list
							this.$nextTick(()=>{
								this.liu_text = ''
							})
						})
					})
				}
				
			},
			order_pay(item){
				var data = {
					order_id:item.id,
				}
				uni.showLoading({
					title:'支付中...',
					mask:true
				})
				var that = this
				// #ifdef H5
				var ua = navigator.userAgent.toLowerCase();
				    var isWeixin = ua.indexOf('micromessenger') !== -1;
				    if (!isWeixin) {
				      this.$wqzApi.guGo_pay_good(data).then(res=>{
				      	var url = res.data
				      	window.location.href = url
				      }).catch(err=>{
				      	
				      })
				    }else{
				      this.$wqzApi.goods_pay_jsapi(data).then(res=>{
				      	var url = res.data
				      	window.location.href = url
				      	
				      }).catch(err=>{
				      	
				      })
				    }
					
				// #endif
				
			},
			Order_cancel(item){
				// 取消订单
				uni.showModal({
					title: '提示',
					content: '关闭订单后订单无法恢复',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					success: (res) => {
						uni.setStorageSync('isModule' , false)
					if(res.confirm) {  
						this.$gugoApi.GoodsOrder_cancel({id:item.id}).then(res=>{
							uni.navigateTo({
								url:'/pages/good_order_List/good_order_List?current=6'
							})
						})
					} else { 
						uni.showToast({
							title:'取消操作',
							icon:'none'
						})
						}  
					} 
				})
				
			},
			// 收货
			shouhuo(item){
				uni.showModal({
					title: '确认收货',
					content: '请确认是否收到货物!',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					success: (res) => {
					if(res.confirm) {  
						this.$gugoApi.GoodsOrder_confirm_receipt({id:item.id}).then(res=>{
							uni.navigateTo({
								url:'/pages/good_order_List/good_order_List?current=4'
							})
						})
					} else { 
						uni.showToast({
							title:'取消操作',
							icon:'none'
						})
						}  
					} 
				})
			},
			cuiFa(){
				uni.showToast({
					title:'催发货成功!',
					icon:'none'
				})
			},
			order_del(item){
				// 删除订单
				uni.showModal({
					title: '提示',
					content: '删除订单后订单无法恢复',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					success: (res) => {
						uni.setStorageSync('isModule' , false)
					if(res.confirm) {  
						this.$wqzApi.shop_order_del({id:item.id}).then(res=>{
							uni.navigateTo({
								url:'/pages/good_order_List/good_order_List?current=0'
							})
						})
					} else { 
						uni.showToast({
							title:'取消操作',
							icon:'none'
						})
						}  
					} 
				})
				
			},
			see_info(item){
				var data = JSON.stringify(item)
				this.navTo(`/pages/goods_order_info/LogisticsDetails?goods_order_spec_id=${item.id}&data=${data}`)
			},
			chooseAddressList(){
				this.getAddress()
			},
			getAddress(){
				// 获取地址列表
				this.$wqzApi.UserAddress_list({name:this.address_text}).then(res => {
					this.addressList = res.data.list
					this.address_pop_show = true
				})
			},
			chooseAddress(ite, ind) {
				// 选择收货地址
				this.addressList.forEach((item, index) => {
					if (ind == index) {
						this.addressList[index].isChoose = true
						this.address = item
						this.address_pop_show = false
						this.change_address(item)
					} else {
						this.addressList[index].isChoose = false
					}
				})
				
			},
			change_address(item){
				var data = {
					"id":this.order_info.id,
					"address_id":item.id,
				}
				this.$wqzApi.GoodsOrder_update_address(data).then(res=>{
					uni.showToast({
						title:'修改成功',
						icon:'none'
					})
					this.getDetail(this.order_info.id)
				})
			},
			kefu(){
				// var newWindow = window.open();
				// newWindow.location.href = 'https://work.weixin.qq.com/kfid/kfc86ee5ab7484f2cba';
			},
			shouHou(){
				uni.navigateTo({
					url:`/pages/order_other_list/refund_shouHou?id=${this.order_id}`
				})
			},
			getDetail(id){
				this.$gugoApi.GoodsOrder_detail({id:id}).then(res=>{
					res.data.order_spec.map((item,index)=>{
						var pic_list = item.goods_data.pic.split(',')
						item.goods_data.pic = pic_list[0]
					})
					this.$wqzApi.message_list({
						"order_id": id, //订单id
						"order_desc": 1 //1正序 2倒序
					}).then(res=>{
						this.liu_list = res.data.list
					})
					this.order_info = res.data
				})
				this.messageUpdate(id)
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url(./order_info.css);
</style>
